<template>
  <view class="li-multi-picker">
    <view @click="onTitleClick"> 333</view>
    <picker-view
      v-if="visible"
      indicator-style="height: 50px;"
      :value="value"
      @change="bindPickerChange"
    >
      <picker-view-column>
        <view
          v-for="(province, index) in provinces"
          :key="province.code"
          class="picker-item"
          >{{ province.name }}</view
        >
      </picker-view-column>
      <picker-view-column>
        <view
          v-if="currentCity"
          v-for="(city, index) in currentCity.children"
          :key="city.code"
          class="picker-item"
          >{{ city.name }}</view
        >
      </picker-view-column>
      <picker-view-column>
        <view
          v-if="currentDistrict"
          v-for="(district, index) in currentDistrict.children"
          :key="district.code"
          class="picker-item"
          >{{ district.name }}</view
        >
      </picker-view-column>
    </picker-view>
  </view>
</template>
<script>
import { areaList } from "../../constants/normalConstants";
export default {
  name: "LiMultiPicker",
  data: function () {
    return {
      visible: false,
      provinces: areaList,
      cities: [], // 城市列表，根据选中的省份动态改变
      districts: [], // 区县列表，根据选中的城市动态改变
      pickerValue: [0, 0, 0], // 当前选中的值
      currentCity: null, // 当前选中的城市
      currentDistrict: null, // 当前选中的区县
    };
  },
  props: {
    value: {},
    rangeList: Array,
    rangeKey: {
      type: String,
      default: "text",
    },
    rangeValue: {
      type: String,
      default: "id",
    },
    notFoundText: {
      type: String,
      default: "无",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    pickerChange(e) {
      this.$emit("input", this.rangeList[e.detail.value][this.rangeValue]);
    },
    onTitleClick: function () {
      this.visible = true;
      console.log("visible", this.visible);
    },
  },
};
</script>
